<template>
  <div class="title-index">
    <div class="month">
      <ul class="tabs">
        <li
            class="li-tab"
            v-for="(item, index) in tabsParam"
            @click="toggleTabs(index)"
            :class="{ active: index === nowIndex }"
            :key="index"
        >
          {{ item }}
          <span></span>
        </li>
      </ul>
    </div>
    <div class="get-time">
      <p>
        已选时间：{{ tateData[0] }} 至
        {{ tateData[tateData.length - 1] }}
      </p>
    </div>
    <el-button
        class="right-el-button"
        @click="handleExport"
    >数据导出</el-button
    >
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'TitleIndex',
  props: {
    flag: {
      type: Number,
      required: true,
    },
    tateData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      nowIndex: 2 - 1,
      value: [],
      tabsParam: ['昨日', '近7日', '近30日', '本周', '本月'],
    }
  },
  watch: {
    flag: {
      handler(val) {
        this.nowIndex = val
      },
    },
  },
  methods: {
    toggleTabs(index) {
      this.nowIndex = index
      this.value = []
      this.$emit('sendTitleInd', index + 1)
    },
    handleExport() {
      this.$confirm('是否确认导出最近30天运营数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(async function () {
            const  data  = await request.get( 'admin/report/export',{responseType: 'blob'})
            // console.log(data);
            let url = window.URL.createObjectURL(data)
            var a = document.createElement('a')
            document.body.appendChild(a)
            a.href = url
            a.download = '运营数据统计报表.xlsx'
            a.click()
            window.URL.revokeObjectURL(url)
          }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出',
        })
      })
          // .then((response) => {})
    },
  },
}
</script>
<style>
.title-index {
  .month {
    box-sizing: border-box;
    display: inline-block;
    background-color: #fff;

    ul {
      width: 400px;
      height: 40px;
      line-height: 38px;
      border: 1px solid #e5e4e4;
      border-radius: 4px;
      padding: 0;
      display: flex;
      text-align: center;
      margin: 0;

      li {
        position: relative;
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        border-right: 1px solid #e5e4e4;
        color: #333333;
        letter-spacing: -0.2px;
        flex: 1;
      }

      li:last-child {
        border: 0 none;
      }

      .active {
        height: 38px;
        background-color: #a3eaff;
      }
    }
  }

  .get-time {
    display: inline-block;
    padding-left: 15px;
    font-size: 14px;
    color: #666;
  }
}
.right-el-button {
  color: #333;
  height: 40px;
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 20px;
  border: 1px solid #E5E4E4;
  float: right;
  &:focus{
    background: #fff;
    border: 1px solid #E5E4E4;
  }
  &.onbutton{
    border: 1px solid #E5E4E4;
    color:#E5E4E4;

  }
  &:hover{
    background:#fff;
  }
  &.is-disabled{
    &:hover{
      border: 1px solid #E5E4E4;
      color:#E5E4E4;
    }
  }
}
</style>